<template>
	<view class="page-content">
		<NavBar
			:isLeft="true"
			:isRight="true"
			:ricon = "'more-filled'"
			:title = "'导游详情'"
			bgcolor="#FFFFFF"
			@onLeft="onLeftIcon"
		></NavBar>
		<!-- 顶部背景图 -->
		<image class="background-image" :src="guideInfo.backgroundImage" mode="widthFix"></image>
		<!-- 导游基本信息栏 -->
		<view class="guide-info">
		  <!-- 头像 -->
			<u-avatar
				class="avatar"
				:src="guideInfo.avatar"
				size="80"
			></u-avatar>
			<!-- 导游信息 -->
			<view class="guide-details">
				<view class="guide-details-header">
					<view class="guide-details-header-left">
						<view class="guide-details-header-name">
							<text class="name">{{ guideInfo.guideName }}</text>
							<text class="tag">已实名354天</text>
							
						</view>
						<view class="guide-details-rate">
							<u-rate active-color="#FED942" readonly size="16" :count="1"></u-rate>
							<text class="rating"> {{ guideInfo.rating }} </text>
							<text class="orders">{{ guideInfo.orders }}+单</text>
						</view>
					</view>
					<u-button v-if="!guideInfo.isGz" class="name-gz" color="#FE4E4E" iconColor="#FFFFFF" icon="plus" size="mini" text="关注" @click="onFollow()"></u-button>
					<u-button v-else class="name-gz" color="#FE4E4E" iconColor="#FFFFFF" icon="chat" size="mini" text="私信" @click="onChat()"></u-button>
				</view>
				<view class="guide-details-ip">
					<u-icon name="map" color="#D81C03" size="20"></u-icon>
					<text class="ip">IP属地 中国香港</text>
					<u-icon v-if="!guideInfo.sex" name="woman" color="#EA0B8B" size="15"></u-icon>
					<u-icon v-else name="man" color="#00A6EE" size="15"></u-icon>
					<text class="age">{{guideInfo.sex?'男':'女'}}<text class="drop">·</text>{{guideInfo.age}}岁</text>
				</view>
				<text class="guide-details-note">{{ guideInfo.details }}</text>
				<view class="guide-details-stats">
					<view class="stat"><text class="text">{{ guideInfo.followers }}</text> 粉丝</view>
					<view class="stat"><text class="text">{{ guideInfo.following }} </text> 关注</view>
					<view class="stat"><text class="text">{{ guideInfo.likes }} </text> 获赞评论</view>
				</view>
				<view class="guide-details-badges">
					<u-tag class="tag" v-for="badge in guideInfo.badges" bold borderColor="#D0EAF7" bgColor="#D0EAF7" color="#0F95DA" :text="badge" size="mini"></u-tag>
				</view>
			</view>
        </view>

		<!-- 其他内容 -->
		<view class="guide-section">
			<view class="guide-section-tab">
				<u-button class="button" color="#555555" shape="circle" size="small" :plain="!current?false:true" text="成交记录" @click="current=!current"></u-button>
				<u-button class="button" color="#555555" shape="circle" size="small" :plain="current?false:true" text="精品路线" @click="current=!current"></u-button>
			</view>
			<!-- 成交记录内容 -->
			<view class="" v-if="current==0">
				<view class="guide-section-record" v-for="(item,index) in rateList">
					<view class="guide-section-record-product" @click="onProductDetail">
						<image class="product" :src="item.product.image"></image>
						<text class="title">{{item.product.title}}</text>
					</view>
					<view class="guide-section-record-rate">
						<text>评价（{{item.product.rate}}条）<text class="tip">近3个月路线好评率高达98%</text></text>
						<text class="more" @click="onOpenComment">查看全部评论></text>
					</view>
					<view class="guide-section-record-user" @click="onOpenComment()">
						<view class="guide-section-record-user-info">
							<view class="guide-section-record-user-info-header">
								<u-avatar
									class="avatar"
									:src="item.avatar"
									size="40"
									@click.native.stop="onOther(item.id)"
								></u-avatar>
								<text class="name">{{item.name}}</text>
								<text class="tag">{{'买过'+item.buy+'次'}}</text>
							</view>
							<view>
								{{item.assess}}
							</view>
						</view>
						<image class="image" :src="item.imageList[0]" ></image>
					</view>
				</view>
			</view>

			<view class="route" v-else> 
				<!-- 精品路线内容 -->
				<view class="route-item" v-for="item in routeList" @click="onProductDetail">
					<image class="image" :src="item.image" mode=""></image>
					<view class="route-item-header">
						<text class="route-item-title">{{item.title}}</text>
						<text class="route-item-price">{{item.price}}<text class="route-item-font-small">/人起</text></text>
						<text class="route-item-font-small">销量{{item.sales}}份</text>
					</view>
					<view class="route-item-route">
						{{item.route}}
					</view>
					<view class="route-item-tags">
						<view class="tag">
							{{item.tip}}
						</view>
						<view class="tag" v-for="tag in item.tagList">
							{{tag}}
						</view>
					</view>
				</view>
				<u-divider text="到底了,没有更多了哦~" textSize="10"></u-divider>

			</view>
			<view class="guide-zxzx">
				<u-button @click="onChat()" type="primary" size="small" color="#FE4E4E" shape="circle" text="在线咨询"></u-button>
			</view>
			
		<!-- 评论内容 -->
		</view>
		<u-popup zIndex="999" overlayStyle="z-index:998" :show="show" mode="bottom" :safeAreaInsetTop="true" :safeAreaInsetBottom="true" :round="20" closeable @close="show = false" @open="onOpenComment">
		    <common-all-rate :rateList="rateList"></common-all-rate>
		</u-popup>
	</view>
</template>

<script>
	import NavBar from "@/components/common-nav/common-nav.vue" 
	import commonAllRate from '@/components/common-all-rate/common-all-rate.vue';
	import guideJson from '@/guide.json';
	import commentJson from '@/comment.json';
	import routeJson from '@/route.json';
export default {
	components: {
	   commonAllRate,
	   NavBar
	},
	data() {
		return {
			show:false,
			current:0,
			guideInfo:{},
			rateList:[],
			routeList:[]
		};
	},
	onLoad(options) {
		this.guideId = options.guideId
		this.getGuideInfo()
	},
	methods:{
		// 返回
		onLeftIcon(){
			uni.navigateBack(
			);
		},
		getGuideInfo(){
			this.rateList = commentJson
			this.routeList = routeJson
			// this.guideInfo = this.$guideJson[1].find(item=>item.id==this.guideId).detail
			this.guideInfo = guideJson.find(item=>item.id==this.guideId).detail
		},
		// 关注
		onFollow(){
			this.guideInfo.isGz = true
			uni.showToast({
				title: '关注成功！'
			});
		},
		// 产品详情
		onProductDetail(){
			uni.navigateTo({
				url: '/pages_sub/product/product'
			});
		},
		// 查看全部评论
		onMoreRate(id){
			uni.navigateTo({
				url: '/pages_sub/rate/rate?id='+id
			});
		},
		// 聊天
		onChat(){
			uni.navigateTo({
				url: '/pages_sub/user/chat/chat?userId='+this.guideInfo.id
			});
		},
		onOther(id){
			uni.navigateTo({
				url: '/pages_sub/user/others/others?userId='+id
			});
		},
		// 打开弹窗
		onOpenComment(){
			this.show = true
		}
	}
};
</script>

<style lang="scss">
	.page-content{
		padding-top: 90rpx;
	}
.background-image {
  width: 100%;
}
.guide-zxzx{
	position: fixed;
	width: 200rpx;
	left: calc(50% - 100rpx);
	bottom:50rpx;
}

.guide-info {
	position: relative;
	margin: -180rpx 20rpx 30rpx 20rpx;
	background-color: rgba(255, 255, 255, 1);
	padding: 20rpx 30rpx;
	border-radius: 10px;
	box-shadow: 0 5rpx 10rpx #F1F1F1;
	.avatar {
		position: absolute;
		top: -50rpx;
		left: 20rpx;
	}
	.guide-details {
		display: flex;
		flex-direction: column;
		font-size: 28rpx;
		line-height: 50rpx;
		&-header{
			padding-left: 160rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			&-left{
				flex: 1;
			}
			.name-gz{
				width: 50rpx;
			}
			&-name {
				display: flex;
				align-items: center;
				.name{
					font-size: 42rpx;
					font-weight: bold;
				}
				.tag{
					width: 110rpx;
					background-color: #737373;
					border-radius: 10rpx;
					font-size: 18rpx;
					padding: 0 10rpx;
					line-height: 30rpx;
					margin-left: 20rpx;
					color: #FFFFFF;
				}
			}
		}
		&-rate{
			display: flex;
			align-items: center;
			font-size: 26rpx;
			.rating {
				margin: 0 30rpx 0 5rpx;
			}
		}
		&-ip{
			display: flex;
			align-items: center;
			.ip{
				margin-right: 50rpx;
			}
			.age{
				// letter-spacing: 10rpx;
			}
			.drop{
				margin: 0 10rpx;
			}
			.button{
				width: 120rpx;
			}
		}
		&-note{
			color: #666;
			width: 100%; /* 设置元素宽度 */
			white-space: nowrap; /* 禁止换行 */
			overflow: hidden; /* 隐藏溢出部分 */
			text-overflow: ellipsis; /* 显示省略号 */
		}
		&-stats{
			font-weight: 700;
			display: flex;
			font-size: 26rpx;
			.stat{
				margin-right: 40rpx;
			}
			.text{
				font-size: 38rpx;
				margin-right: 10rpx;
			}
		}
		&-badges{
			display: flex;
			flex-wrap: wrap;
			.tag{
				min-width: 100rpx;
				margin: 20rpx 40rpx 0 0;
				font-weight: bold;
			}
		}
	}
}


// guide-section---成交记录、精品路线
.guide-section {
	margin-bottom: 20px;
	&-tab{
		display: flex;
		// justify-content: space-between;
		width: 300rpx;
		padding-left:20rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #F8F8F8;
		.button{
			margin-right: 20rpx;
		}
	}
	&-record:last-child{
		border: none!important;
	}
	&-record{
		border-bottom: 10rpx solid #F1F1F1;
		padding:30rpx 20rpx  20rpx 20rpx;
		&-product{
			display: flex;
			font-size: 30rpx;
			color: #676767;
			align-items: center;
			.product{
				width: 120rpx;
				height: 120rpx;
				border-radius: 20rpx;
				margin-right: 20rpx;
			}
			.title{
				flex: 1;
				width: 200rpx;
			}
		}
		&-rate,&-user{
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 28rpx;
		}
		&-rate{
			// padding-top: 50rpx;
			// padding-bottom: 10rpx;
			padding: 20rpx 0;
			
			border-bottom: 1rpx solid #F8F8F8;
			.tip{
				color: #1195DB;
				font-size: 24rpx;
			}
			.more{
				color: #676767;
				font-size: 26rpx;
			}
		}
		&-user{
			margin-top: 20rpx;
			&-info{
				line-height: 40rpx;
				flex: 1;
				&-header{
					display: flex;
					align-items: center;
					margin-bottom: 15rpx;
					.tag{
						margin: 0!important;
						background-color: #FDD391;
						border-radius: 20rpx;
						font-size: 20rpx;
						padding: 0 10rpx;
						line-height: 30rpx;
						color: #BC7C20;
					}
					.name{
						margin: 0 20rpx;
						font-size: 30rpx;
					}
				}
			}
			.image{
				width:140rpx;
				margin-left: 20rpx;
				height: 130rpx;
				border-radius: 15rpx;
			}
		}
	}
}
.route{
	padding: 0 20rpx;
	.route-item{
		margin: 20rpx 0;
		height: 200rpx;
		position: relative;
		color: #FFFFFF;
		font-size: 42rpx;
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		&-font-small{
			font-size: 24rpx;
			margin-right: 20rpx;
		}
		.image{
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			bottom: 0;
			top: 0;
			z-index: -1;
			border-radius: 20rpx;
		}
		.image:after {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.5); /* 蒙层颜色及透明度 */
		}
		&-title{
			font-weight: bold;
		}
		&-price{
			color: #FF4E4E;
			margin-left: 20rpx;
			font-weight: bold;
		}
		&-route{
			font-size: 26rpx;
			margin: 10rpx 0;
		}
		&-tags{
			display: flex;
			flex-wrap: wrap;
			font-size: 20rpx;
			.tag:first-child{
				background-color: #FF4E4E;
				border-color: #FF4E4E;
			}
			.tag{
				border-radius: 8rpx;
				border: 1rpx solid #FFFFFF;
				padding: 5rpx 10rpx;
				margin-right: 20rpx;
			}
		}
	}
}

</style>
